<!DOCTYPE html>
<html>
<head>
	<script src="../createjs-2015.05.21.min.js"></script>
	<script>
		var isRetina = window.devicePixelRatio > 1;

		function init() {
			var stage = new createjs.Stage("demoCanvas");
			var circle = new createjs.Shape();
			circle.graphics.beginFill("rgba(255, 93, 102, 1)").drawCircle(0, 0, isRetina ? 100: 50);
			circle.x = 100;
			circle.y = 200;
			stage.addChild(circle);

			createjs.Tween.get(circle, { loop: true })
					.to({ x: 400 }, 1000, createjs.Ease.getPowInOut(4))
					.to({ alpha: 0, y: isRetina ? 150: 175 }, 500, createjs.Ease.getPowInOut(2))
					.to({ alpha: 0, y: isRetina ? 250: 225 }, 100)
					.to({ alpha: 1, y: 200 }, 500, createjs.Ease.getPowInOut(2))
					.to({ x: 100 }, 800, createjs.Ease.getPowInOut(2));

			createjs.Ticker.setFPS(60);
			createjs.Ticker.addEventListener("tick", stage);
		}
	</script>
	<style>
		body {
			margin: 0;
			position: absolute;
			top:0;
			bottom:0;
			left:0;
			right:0;
			background-color: rgba( 250, 252, 255, 1 );
		}
		canvas {
			position: absolute;
			top:0;
			bottom:0;
			left:0;
			right:0;
			margin: auto;
			max-width: 100%;
		}
		@media (-webkit-min-device-pixel-ratio: 1.5),
		(min-resolution: 144dpi) { 
			canvas {
				transform: translateZ(0) scale(0.5);
				transform-origin: center center;
			} 
		}
	</style>
</head>
<body onload="init();">
	<canvas id="demoCanvas" width="500" height="400"></canvas>
</body>
</html>